<html>
<head>
    <title>订单管理</title>
    <link href="/lib/layui/css/layui.css" rel="stylesheet"/>
</head>
<style>
</style>
<body>
<form class="layui-form" action="" lay-filter="form2">
    <div class="layui-form-item" style="margin-top: 10px">
        <div class="layui-inline">
            <label class="layui-form-label">会员姓名</label>
            <div class="layui-input-inline">
                <input id="input1" type="text"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select  id="select1">
                    <option value="2">所有</option>
                    <option value="0" selected>待发货</option>
                    <option value="1">待收货</option>
                    <option value="-1">已收货</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <input id="searchBtn" type="button" value="查询" class="layui-btn"/>
        </div>
    </div>

</form>

<table id="pTable"></table>

<!--弹出窗口模版-->
<script id="template1" type="text/html">
    <table id="detail"></table>
</script>

<script id="template2" type="text/html">
    {{# if(d.status1=='0') {   }}
    <input lay-event="submit" id="statusBtn" type="button" class="layui-btn layui-btn-xs" value="确认发货"/>
    {{# }else if(d.status1=='1') { }}
    <input lay-event="" id="statusBtn1" type="button" class="layui-btn layui-btn-xs layui-bg-orange" value="退货/退款"/>
    {{#   }  }}
    <input lay-event="detail" type="button" class="layui-btn layui-btn-xs layui-bg-red" value="订单详情"/>
</script>
<script src="/lib/layui/layui.js"></script>
<script src="/js/common.js"></script>
<script th:inline="none">
    //告诉浏览器加载layui框架的那些组件
    //加载完小组件，就执行Function
    layui.use(['table', 'layer', 'form','upload','element'], function () {
        //console.log("123");
        //第一步先对加载的组件起名
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        var upload = layui.upload;

        //给删除绑定事件
        $("#delBtn").on("click", function () {
            var o = table.checkStatus("pTable");
            if (o.data.length == 0) {
                layer.msg("至少选中一行");
                return false
            }
            var arr = [];
            var ids = "";
            $.each(o.data, function (index, item) {
                arr[index] = item.id;
                if (ids != "") {
                    ids += ",";
                }
                ids += item.id;
            });
            console.log(arr);
            $.post("/user/del", {ids: ids}, function () {

            });
        });

        //给查询按钮绑定事件
        $("#searchBtn").on("click", function () {
            //用js发起一个请求去要一些数据会回来，要到之后把数据插入到table中
            //通过table组件渲染表格
            table.render({
                elem: "#pTable",
                url: "/orderInfo/select",
                cols: [[
                    {title: "选择", type: "checkbox"},
                    {title: "序号", type: "numbers"},
                    {title: "订单号", field: "code"},
                    {title: "总价格", field: "price"},
                    {title: "会员用户", field: "username"},
                    {title: "下单时间", field: "createTime"},
                    {title: "订单发货状态", field: "status1"},
                    {title: "支付方式", field: "payType"},
                    {title: "操作", templet: "#template2"}
                ]],
                where: {username: $("#input1").val(),status1: $("#select1").val()},
                page: true,
                limits: [5, 10, 20],
                limit: 20
            });
        }).click();

        table.on("tool", function (obj) {
            var event = obj.event;
            var data = obj.data;//当前这一行
            console.log(data.id)
            if (event === "submit") {
                layer.confirm("你确定要发货吗？", function () {
                    //给发货按钮绑定事件
                    $.post("/orderInfo/update?id="+data.id, function () {
                        layer.closeAll();
                        //给成功提示
                        layer.msg("发货成功");
                        //刷新页面
                        location.reload();
                    });
                });
            }

            if (event === "detail") {
                /*$.get("/order/info?id="+data.id, function () {*/
                layer.open({
                    title: "订单详细信息",
                    type: 1,
                    area: ['1000', '400px'],
                    content: $("#template1").html(),
                    success:function (){
                        table.render({
                            elem: "#detail",
                            url: "/orderInfo/detail?id="+data.id,
                            cols: [[
                                {title: "购买产品", field: "name"},
                                {title: "版本", field: "edition"},
                                {title: "颜色", field: "color"},
                                {title: "产品单价", field: "oldPrice"},
                                {title: "下单数量", field: "amount"},
                                {title: "收件人", field: "consignee"},
                                {title: "省", field: "province"},
                                {title: "市", field: "city"},
                                {title: "区", field: "area"},
                                {title: "详细地址", field: "address"},
                                {title: "收件人电话", field: "tel"}
                            ]],
                        });
                    }
                });
            }
        });
    })
</script>

</body>
</html>
